import React, { useState } from 'react';
import { Button, Input, Cell, Toast } from 'react-vant'; // 去掉了 Radio 和 Radio.Group 的导入
import { ChatO } from '@react-vant/icons';
import './tabs1.css';
import axios from 'axios';

const Calendar = ({ leaveType }) => {
  const [currentDate, setCurrentDate] = useState(new Date()); // 当前日期
  const [selectedDate, setSelectedDate] = useState(null); // 只存储一个选中的日期
  const [zhuangtai, setZhuangtai] = useState(false); // 控制 TextArea 是否显示，初始隐藏
  const [startTime, setStartTime] = useState(''); // 存储开始时间
  const [endTime, setEndTime] = useState(''); // 存储结束时间

  // 格式化日期为 YYYY-MM-DD
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，+1，确保格式为两位数
    const day = date.getDate().toString().padStart(2, '0'); // 确保日期为两位数
    return `${year}-${month}-${day}`;
  };

  // 获取一个月的天数以及当月的第一天是星期几
  const getMonthData = (date) => {
    const year = date.getFullYear();
    const month = date.getMonth();
    const firstDay = new Date(year, month, 1); // 本月的第一天
    const lastDay = new Date(year, month + 1, 0); // 本月的最后一天

    const firstDayOfWeek = firstDay.getDay(); // 本月第一天是星期几
    const lastDate = lastDay.getDate(); // 本月的最后一天是几号

    // 生成日历数据，第一行填充上个月的日期
    const days = [];
    for (let i = 1 - firstDayOfWeek; i <= lastDate; i++) {
      const dayDate = new Date(year, month, i);
      days.push(dayDate);
    }

    return days;
  };

  // 切换到下一个月
  const nextMonth = () => {
    setCurrentDate((prevDate) => {
      const newDate = new Date(prevDate);
      newDate.setMonth(newDate.getMonth() + 1);
      return newDate;
    });
  };

  // 切换到上一个月
  const prevMonth = () => {
    setCurrentDate((prevDate) => {
      const newDate = new Date(prevDate);
      newDate.setMonth(newDate.getMonth() - 1);
      return newDate;
    });
  };

  // 选择一个日期
  const toggleDateSelection = (date) => {
    const today = new Date();
    today.setHours(0, 0, 0, 0); // 设置时间为 00:00:00
    const selectedDate = new Date(date);
    selectedDate.setHours(0, 0, 0, 0); // 设置时间为 00:00:00

    const disableDate = selectedDate < today; // 禁用当前日期之前的日期
    if (disableDate) return; // 早于当前日期的日期不允许点击

    // 如果已选中的日期相同，则取消选择，否则选择新的日期
    setSelectedDate((prevSelectedDate) => (prevSelectedDate?.toDateString() === date.toDateString() ? null : date));
  };

  // 输出选中的日期
  const handleShowSelectedDate = () => {
    if (!selectedDate) {
      Toast.info('请先选择日期');
      return;
    }

    // 格式化开始时间和结束时间
    const formattedStartDate = `${formatDate(selectedDate)} ${startTime}`;
    const formattedEndDate = `${formatDate(selectedDate)} ${endTime}`;

    const data = {
      id: new Date().getTime(),
      name: leaveType, // 因为没有选择单选框内容，这里设为 "假期"
      state: "审核中",
      shijian1: formattedStartDate, // 使用自定义格式
      shijian2: formattedEndDate,   // 使用自定义格式
    };

    axios.post('http://192.168.0.154:3000/my/leave', data)
      .then(res => {
        Toast.info('提交成功！');
      })
      .catch(error => {
        Toast.fail('提交失败！');
      });
  };

  // 切换文本框显示状态
  const toggleTextAreaVisibility = () => {
    setZhuangtai((prevZhuangtai) => !prevZhuangtai);
  };

  const days = getMonthData(currentDate);
  const currentMonth = currentDate.toLocaleString('default', { month: 'long', year: 'numeric' });

  return (
    <div className="calendar" style={{ margin: '0 auto' }}>
      <div className="calendar-header">
        <button onClick={prevMonth}>上一月</button>
        <span style={{ marginTop: '16px' }}>{currentMonth}</span>
        <button onClick={nextMonth}>下一月</button>
      </div>
      <div className="calendar-grid">
        {['日', '一', '二', '三', '四', '五', '六'].map((day, index) => (
          <div key={index} className="calendar-header-day">
            {day}
          </div>
        ))}
        {days.map((date, index) => {
          const isSelected = selectedDate?.toDateString() === date.toDateString();
          const isToday = date.toDateString() === new Date().toDateString();
          const isBeforeToday = new Date(date).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0); // 禁用当前日期之前的日期
          return (
            <div
              key={index}
              className={`calendar-day ${isSelected ? 'selected' : ''} ${isToday ? 'today' : ''} ${isBeforeToday ? 'disabled' : ''}`}
              onClick={() => !isBeforeToday && toggleDateSelection(date)} // 禁用日期不可点击
            >
              {date.getDate()}
            </div>
          );
        })}
      </div>

      <hr style={{ marginTop: '10px' }} />
      <p style={{ marginTop: '16px', textAlign: 'left' }}>开始时间</p>
      <input
        type="text"
        value={startTime}
        placeholder="请选择开始时间"
        style={{ borderRadius: '8px', width: '90%', margin: '0 auto', marginTop: '16px' }}
        onChange={(e) => setStartTime(e.target.value)} // 更新开始时间
      />
      <p style={{ marginTop: '16px', textAlign: 'left' }}>结束时间</p>
      <input
        type="text"
        value={endTime}
        placeholder="请选择结束时间"
        style={{ borderRadius: '8px', width: '90%', margin: '0 auto', marginTop: '16px' }}
        onChange={(e) => setEndTime(e.target.value)} // 更新结束时间
      />

      {zhuangtai && (
        <Cell style={{ width: '98%', border: '1px solid #ccc', borderRadius: '8px', marginTop: '16px' }}>
          <Input.TextArea placeholder="添加一些任务描述" />
        </Cell>
      )}

      <div
        style={{
          display: 'flex',
          justifyContent: 'space-around',
          marginTop: '16px',
          width: '100%',
          alignItems: 'center',
        }}
      >
        <div style={{ textAlign: 'center' }} onClick={toggleTextAreaVisibility}>
          <ChatO fontSize={20} />
        </div>
        <div style={{ width: '80%' }}>
          <Button type="primary" style={{ width: '100%' }} block round onClick={handleShowSelectedDate}>
            提交
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Calendar;
